<template>
    <view class="rx-workbench" :key="key">
        <view class="rx-top" v-if="portalList.length!=0">
            <view class="rx-timeliness">{{ userColumn.fullName }}{{i18n('hello','您好')}}!</view>
            <view class="rx-fullName">{{ userColumn.timeliness }}</view>
            <view class="rx-time"><span
                style="margin-right: 0.5rem">{{ userColumn.time }}</span><span>{{ userColumn.week }}</span></view>
        </view>
        <view class="rx-workbench-contend" v-if="portalList.length==1&&portalList&&portalList.length>0">
            <rx-portal :portal="portalList[0]" slot="center"/>
        </view>
        <view class="rx-workbench-contend" v-else-if="portalList.length>1">
            <ul class="rx-navTab">
                <li v-for="(portal,index1) in portalList" :key="index1"
                    :class="[index1==activeIndex?'active':'']">
                    <span @click="handleActive(index1)">{{ $i18(portal.name, '门户名称') }}</span>
                </li>
            </ul>
            <view style="flex: 1;overflow: auto">
                <view :key="index" v-for="(portal,index) in portalList">
                    <rx-portal v-if="index==activeIndex" :portal="portal"/>
                </view>
            </view>
        </view>
        <view class="rx-empty" v-if="portalList.length==0 && empty">
            <image src="@/static/empty.png"/>
            <span class="rx-empty-name">{{i18n('configureMobile','请前往平台门户中心配置移动门户')}}</span>
        </view>
    </view>
</template>

<script>
import GatewayApi from "@/api/Gateway/GatewayApi";
import RxPortal from "@/pages/RxGateway/RxPortal";
import instAndTaskShareApi from "@/api/instAndTaskShareApi";
import moment from "moment";
import Constants from '@/common/constants.js';
import Util from "../js/Util";

export default {
    name: "RxWorkbench",
    data() {
        return {
            portalList: [],//门户列表
            activeIndex: 0,
            instId: "",
            i18nDefault: this._vueAppLanguage,
            userColumn: {
                fullName: '',
                time: '',
                week: '',
                timeliness: ''
            },
            key:Util.randomId(),
            empty:false,
        }
    },
    components: {
        RxPortal
    },
    async created() {
        if (Constants.VUE_APP_CODE) {
            await this.appKey()
        }else {
            uni.setStorage({key: "mobileAppId", data: ''});
        }
        this.getMyOwnApp();
        this.getInfo();
    },
    onShow() {
        //刷新时间
        this.init();
        //清空appid
        if (!Constants.VUE_APP_CODE) {
            uni.setStorage({key: "mobileAppId", data: ''});
        }
        this.initI18n();
        this.key=Util.randomId();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "mobileLang", key);
        },
        initI18n() {
            let language = uni.getStorageSync("language");
            if (!language) {
                this.setI18nType(this.i18nDefault);
                return;
            }
            this.setI18nType(language);
        },
        async appKey() {
            await GatewayApi.getByAppKey(Constants.VUE_APP_CODE).then(res => {
                uni.setStorage({key: "mobileAppId", data: res.appId});
            })
        },
        init() {
            let todayName = {
                1:this.i18n('Monday','星期一'),
                2:this.i18n('Tuesday','星期二') ,
                3:this.i18n('Wednesday','星期三'),
                4:this.i18n('Thursday','星期四'),
                5:this.i18n('Friday','星期五'),
                6:this.i18n('Saturday','星期六'),
                0:this.i18n('Sunday','星期天')}
            let today = moment().day();
            let user = uni.getStorageSync("user")
            this.userColumn.fullName = user.fullName;
            this.userColumn.time = moment().format("YYYY-MM-DD");
            this.userColumn.week = todayName[today];
            this.userColumn.timeliness = this.getTimeOfDay();
        },
        getTimeOfDay() {
            const now = moment(); // 获取当前时间
            const hour = now.hour(); // 获取小时数

            if (hour >= 6 && hour < 12) {
                return this.i18n('morning','上午');
            } else if (hour >= 12 && hour < 18) {
                return this.i18n('afternoon','下午');
            } else if (hour >= 18 && hour < 24) {
                return this.i18n('night','晚上');
            } else {
                return this.i18n('atNight','夜里'); // 或者是午夜
            }
        },
        setI18nType(type) {
            this.$i18n.locale = type;
            uni.setNavigationBarTitle({
                title: this.i18nRouterName('pages/RxWorkbench', '工作台') // 新标题内容
            });
            uni.setTabBarItem({
                index: 0,
                text: this.i18nRouterName('pages/RxWorkbench', '工作台'),
                "pagePath": "pages/RxWorkbench",
            });
            uni.setTabBarItem({
                index: 1,
                text: this.i18nRouterName('pages/RxMyInfo', '我的'),
                "pagePath": "pages/RxMyInfo",
            });
        },
        getInfo() {
            let appId = uni.getStorageSync("mobileAppId");
            GatewayApi.listMobilePortals(appId).then(res => {
                if (res.success) {
                    this.portalList = res.data;
                    this.empty = true;
                }
            })
        },
        handleActive(index) {
            this.activeIndex = index
        },
        async getMyOwnApp() {
            let params = {
                appTypes: "1",
                catKey: "BPM",
                readKey: "start.read"
            };
            let res = await instAndTaskShareApi.getMyOwnApp(params);
            if (res.success) {
                //流程分类权限列表
                uni.setStorage({key: "treeRootList", data: res.data});
            }
        }
    }
}
</script>

<style scoped>
.rx-empty{
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.rx-empty image{
    width: 18rem;
}
.rx-empty-name{
    font-size: 0.8rem;
    margin-top: -1rem;
    text-align: center;
    width: 80%;
    color: rgb(122, 126, 131);
}
.rx-top {
    height: 12rem;
    background-image: url("@/static/staging.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.rx-workbench-contend {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
}

.rx-workbench {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rx-navTab {
    padding: .4rem .8rem;
    color: rgba(0, 0, 0, 0.85);
    white-space: nowrap;
    overflow-x: scroll;
    display: flex;
    margin-top: 0.5rem;
    background: #fff;
}

.rx-navTab li {
    padding: .2rem .6rem;
    border-radius:4rpx;
    margin-right: .4rem;
    display: inline-block;
    justify-content: left;

}
.rx-navTab li span{
    color:#7F7F7F;
}
.rx-navTab li.active {
    background: rgba(66, 129, 255, 1);

}
.rx-navTab li.active span{
    color: white;
}
.rx-timeliness {
    color: white;
    font-size: 0.9rem;
    margin: 2rem 0rem 0rem 1rem;
}

.rx-fullName {
    color: white;
    font-size: 1.3rem;
    margin: 1rem 0rem 0rem 1rem;
}

.rx-time {
    color: white;
    font-size: 0.8rem;
    margin: 1rem;
}
</style>
